<template>
  <div class="containter">
    <div class="header">配置管理</div>

    <el-collapse class="container" v-model="activeConfig" accordion>
      <el-collapse-item name="1">
        <template class="header" slot="title">
          <i v-if="activeConfig == 1" class="el-icon-caret-bottom"></i
          ><i v-else class="el-icon-caret-right"></i> 首页轮播图设置
        </template>
        <Carousel-card />
      </el-collapse-item>
      <el-collapse-item name="2">
        <template class="header" slot="title">
          <i v-if="activeConfig == 2" class="el-icon-caret-bottom"></i
          ><i v-else class="el-icon-caret-right"></i> 网站背景图设置
        </template>
        <Bg-img-card />
      </el-collapse-item>
      <el-collapse-item name="3">
        <template class="header" slot="title">
          <i v-if="activeConfig == 3" class="el-icon-caret-bottom"></i
          ><i v-else class="el-icon-caret-right"></i> 教师名单管理
        </template>
        <Teacher-list-card />
      </el-collapse-item>
      <el-collapse-item name="4">
        <template class="header" slot="title">
          <i v-if="activeConfig == 4" class="el-icon-caret-bottom"></i
          ><i v-else class="el-icon-caret-right"></i> 名单导入模板管理
        </template>
        <Group-importable-card />
      </el-collapse-item>
      <el-collapse-item name="5">
        <template class="header" slot="title">
          <i v-if="activeConfig == 5" class="el-icon-caret-bottom"></i
          ><i v-else class="el-icon-caret-right"></i> 培训记录邮件提醒功能管理
        </template>
        <Email-noticing-card />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import CarouselCard from "./carouselCard.vue";
import BgImgCard from "./bgImgCard.vue";
import TeacherListCard from "./teacherListCard.vue";
import GroupImportableCard from "./groupImportableCard.vue";
import EmailNoticingCard from "./emailNoticingCard.vue";
export default {
  components: {
    CarouselCard,
    BgImgCard,
    TeacherListCard,
    GroupImportableCard,
    EmailNoticingCard,
  },
  data() {
    return {
      activeConfig: "0",
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.containter {
  width: 75%;
  min-width: 1000px;
  margin: auto;

  .header {
    color: white;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    height: 50px;
  }
}

.el-collapse {
  // border: 2px black solid;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255) !important;
  width: 95%;
  margin: auto;

  /deep/ .el-collapse-item__header {
    background-color: rgba(255, 255, 255, 0.486) !important;
    padding-left: 10px;
    font-size: 100%;
    transition: 0.2s ease all;
    letter-spacing: 1px;

    display: flex;
    white-space: pre;
  }
}
</style>